import React, { Component } from 'react'
import { List, InputItem, Picker, Button, Modal } from 'antd-mobile'
import { observer } from 'mobx-react/custom'
import JoinVM from 'cvm/join/join'
import './join.less'

const Item = List.Item
const operation = Modal.operation
const GetCode = observer(({vm}) => {
  return (
    <input type='button' onClick={() => vm.handleGetCode(this)} value={vm.codeValue} className={vm.codeClass} disabled={vm.codeDisable} />
  )
})
const JoinList = observer(({ vm }) => {
  return (
    <div>
      <p className='information-title'>填写个人基本信息</p>
      <List style={{ backgroundColor: 'white' }} className='picker-list' id='picker-lists'>
        <InputItem
          placeholder='填写真实姓名'
          clear
          maxLength='8'
          onChange={(v) => vm.onChange(v, 'UserName')}
        >姓名</InputItem>
        <Button
          className='choose-gender'
          onClick={(v) => operation([
            { text: '男', onPress: () => vm.onChange(0, 'Male') },
            { text: '女', onPress: () => vm.onChange(1, 'Female') }
          ])}
        >
          <Item
            arrow='horizontal'
          >
            性别
            <span className={vm.genderStyle}>
              <span className='gender'>{vm.userGender}</span>
            </span>
          </Item>
        </Button>
        <InputItem
          placeholder='填写真实年龄'
          clear
          type='number'
          maxLength='8'
          onChange={(v) => vm.onChange(v, 'UserAge')}
        >年龄</InputItem>
        <InputItem
          placeholder='填写身份证号'
          clear
          maxLength='18'
          onChange={(v) => vm.onChange(v, 'UserId')}
          onBlur={(v) => vm.IdCodeValid(v)}
        >身份证号</InputItem>
        <InputItem
          placeholder='输入手机号'
          type='phone'
          id='phone'
          onChange={(v) => vm.onChange(v, 'PhoneNumber')}
          onBlur={(v) => vm.phoneCodeValid(v)}
        >联系电话
          {/* <span className={vm.codeClass}
            onClick={() => vm.handleGetCode(this)}
            disabled={vm.codeDisable} >{vm.codeValue}</span> */}
          {/* <input type='button' onClick={() => vm.handleGetCode(this)} value={vm.codeValue} className={vm.codeClass} disabled={vm.codeDisable} /> */}
          <GetCode vm={vm}>{null}</GetCode>
        </InputItem>
        <InputItem
          placeholder='填写验证码'
          clear
          maxLength='6'
          type='number'
          onChange={(v) => vm.onChange(v, 'UserCode')}
        >验证码</InputItem>
        <div id='city' className='city-address'>
          <div className={vm.cityStyle}>
            <Picker
              extra='请选择所在城市'
              data={vm.addressList}
              titie='请选择'
              value={vm.cityCode}
              onOk={(label) => vm.onChange(label, 'CityCode')}
              onDismiss={e => console.log('dismiss', e)}
              // onPickerChange={(label) => vm.onChange(label, 'CityCode')}
            >
              <List.Item arrow='horizontal'>常驻城市</List.Item>
            </Picker>
          </div>
        </div>
      </List>
      <p className='id-card'>上传手持身份证照，确保脸部五官、身份证信息清晰</p>
      <div className='img-box'>
        <div className='id-card-img'>
          <img src={vm.idCardImg} />
          <input style={{ fontSize: 16 }} onChange={vm.handleImageChange} type='file' id='multiple' className='multiple' />
        </div>
      </div>
      <div className='btn-box'>
        <Button type='primary' onClick={() => vm.handleSubmitApply()} >提交申请</Button>
      </div>
    </div>
  )
})
@observer
class join extends Component {
  constructor (props) {
    super(props)
    this.vm = new JoinVM(props)
    window.document.title = '微职申请'
  }
  render () {
    return (
      <div>
        <JoinList vm={this.vm} />
      </div>
    )
  }
}

export default join
